<template>
  <div :class="`tooltip-after`" :data-hover-content="hoverCon" :data-popper-placement="placement">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "TooltipAfter",
  props: {
    id: {
      type: String,
      default: ""
    },
    hoverCon: {
      type: String,
      default: "",
    },
    placement: {
      type: String,
      default: "top",
    },
  }
}
</script>

<style lang="scss" scoped>
.tooltip-after {
  position: relative;
  // padding: 20px;
  // background-color: #f0f0f0;
  transition: background-color 0.3s;
}
.tooltip-after::after {
  display: block;
  height: 28px;
  line-height: 28px;
  text-align: center;
  display: block;
  width: auto;
  // min-width: 50px;
  // max-width: fit-content;
  content: attr(data-hover-content);
  position: absolute;
  top: -30px;
  // bottom: 0px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: white;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s;
  visibility: hidden;
}
.tooltip-after:hover::after {
  opacity: 1;
  visibility: visible;
}
</style>